<template>
  <input
    type="file"
    :class="cn(inputVariants({ color, size }), $attrs.class)"
    :value="modelValue"
    @change="onChange"
  />
</template>
<script setup lang="ts">
import { cva } from "class-variance-authority";
import { cn } from "../utils";
import type { Color, Size } from "../ui/types";

interface Props {
  color?: Color;
  size?: Size;
}
const inputVariants = cva("file-input", {
  variants: {
    color: {
      primary: "file-input-primary",
      secondary: "file-input-secondary",
      accent: "file-input-accent",
      neutral: "file-input-neutral",
      info: "file-input-info",
      success: "file-input-success",
      warning: "file-input-warning",
      error: "file-input-error",
    },
    size: {
      xs: "file-input-xs",
      sm: "file-input-sm",
      md: "file-input-md",
      lg: "file-input-lg",
      xl: "file-input-xl",
    },
  },
});
defineProps<Props>();
const modelValue = defineModel<string | File>();

function onChange(event: Event) {
  const input = event.target as HTMLInputElement;
  const files = input.files;
  if (!files) return;
  if (files.length === 1) {
    modelValue.value = files[0];
  }
}
</script>
